<?php ?>


<!-- droidiface lib -->
<script type="text/javascript" src="/js/droidiface.js"></script>

<link rel="stylesheet" href="/css/plugins/bootstrap-image-gallery/css/bootstrap-image-gallery.min.css">
<script src="/js/plugins/bootstrap-image-gallery/bootstrap-image-gallery.min.js"></script>

<!-- user code -->
<script type="text/javascript">
    function requestPicture() 
    {
        GN.Camera.requestAndroidPicture( function(img) {
              
            document.getElementById('ima').src = "data:image/png;base64,"+img;
            document.getElementById('sube').innerHTML = img.toString().length;
            sube(img);
                 
        });
    }    
    
    function sube(img){
        var url = '/pruebas/imagen';
        var param = "id=106&img="+img+"";
        $.ajax({
            type: 'POST',
            url: url,
            data: param,
            success: function(response){
                //document.getElementById('sube').innerHTML = "sube";    
            }
        });
        
    }

    function requestGPSCoordinates() 
    {
        var latlng = GN.GPS.getLatLng();
        if( "" == latlng ) {  
            document.getElementById('latlng').innerHTML = 'NO GPS DATA';
            return false; 
        }
        document.getElementById('latlng').innerHTML = latlng;
    }
</script>
</head>
<body>
<center>
    <h2> Retail Brain - Droid support</h2><br>
    <a href='#' onclick='return requestPicture();'>Camera</a>
    &nbsp; &nbsp; <a  href='#' onclick='return requestGPSCoordinates();'>GPS</a>
    <hr>
    <img id='ima' alt="Picture Frame">
    <div id="latlng">
    </div>
    
    <div id="sube">
    </div>
    
   <div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery">
    <?php 
    //
    foreach ($photos as $value) {?>
       <div class="gallery-item" data-href="banana.jpg" title="B<img src="data:image/png;base64,<?php echo ($value['imagen']);?>"  title="Banana" data-gallery="gallery">
    <?php } ?>
</div>


</center>

